<template>
  <div class="default-message">
    <div class="default-message-content" v-html="content"></div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Message",
  props: {
    // 内容
    content: {
      type: String,
      default: "",
      required: true,
    },
  },
  setup(props) {},
});
</script>
<style scoped lang="scss">
.default-message {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.25);

  .default-message-content {
    padding: 10px 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate3d(-50%, -50%, 0);
    background: rgba($color: #000000, $alpha: 0.5);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    animation: fadeIn 1s both;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>